<template>
  <div class="app-container">
    <div class="app-containermain">
      <div class="fontsize" style="margin-top: 30px">用户消息配置</div>
      <el-form
        ref="dataForm"
        :model="dataForm"
        status-icon
        label-position="left"
        label-width="100px"
        style="width: 100%"
        id="selectForm"
        size="medium"
      >
        <el-form-item
          label="是否接收企业微信"
          prop="dataForm"
          class="flexdiv"
          label-width="160px"
        >
          <el-select
            v-model="dataForm.receiveEnterpriseWechat"
            placeholder="请选择状态"
          >
            <el-option
              v-for="(item, index) in statusMap"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          label="是否接收邮件"
          prop="dataForm"
          class="flexdiv"
          label-width="160px"
        >
          <el-select v-model="dataForm.receiveMail" placeholder="请选择状态">
            <el-option
              v-for="(item, index) in statusMap"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          label="是否接收手机短信"
          prop="dataForm"
          class="flexdiv"
          label-width="160px"
        >
          <el-select
            v-model="dataForm.receivePhoneNote"
            placeholder="请选择状态"
          >
            <el-option
              v-for="(item, index) in statusMap"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          label="是否接收钉钉消息"
          prop="dataForm"
          class="flexdiv"
          label-width="160px"
        >
          <el-select
            v-model="dataForm.receiveDingdingChat"
            placeholder="请选择状态"
          >
            <el-option
              v-for="(item, index) in statusMap"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align: center; margin-top: 50px" id="btn">
        <el-button style="width: 100px" type="primary" @click="change"
          >确定</el-button
        >
      </div>
    </div>
  </div>
</template>

  <style scoped>
.app-containermain {
  width: 600px;
  margin: 0 auto;
}
.fontsize {
  font-weight: 600;
  font-size: 18px;
  margin: 20px 0;
}
.flexdiv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}


#selectForm >>> .el-form-item__label {
  font-size: 16px;
  letter-spacing:1px;
  color: #606266;
  font-weight: normal;
}
#btn{
  margin-right: 50px;
}


</style>
  <script>

import {
  informConfigget,
  informConfigcreate,
} from "@/api/notificationmanagement";

// const statusMap = [
//   {id:0,name:'否'},
//   {id:1,name:'是'}
// ]

export default {
  name: "ChangeDevice",
  data() {
    return {
      //获取用户id
      id: this.$store.state.user.id,
      dataForm: {
        receiveMail: "",               //邮件
        receivePhoneNote: "",          //手机短信
        receiveEnterpriseWechat: "",   //企业微信
        receiveDingdingChat: "",       //钉钉

      },
      value: "",
      statusMap: [
        { id: 0, name: "否" },
        { id: 1, name: "是" },
      ],
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    getlist() {
      console.log("内存数据id", this.id);
      informConfigget(this.id).then((res) => {
        // console.log("res接口44444", res);
        this.dataForm = res.data.data;
      });
    },

    //点击按钮确定提交内容
    change() {
      // console.log("777777", this.dataForm);

      informConfigcreate(this.dataForm).then((res) => {
        console.log("chenggong", res);
        this.dataForm = res.data.data;

        this.$message({
          message: "数据保存成功",
          type: "success",
        });
      });
    },
  },
};
</script>
  